<template>
	<view class="download">
		<view class="bj">
			<view class="download_bj">
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
			</view>
			<view class="download_bj1">
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
			</view>
			<view class="download_bj1">
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
			</view>
			<view class="download_bj">
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
				<image src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
			</view>
		</view>
		<view class="mask">
			<image class="title" src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/046a2d71223dd641b3f2de46b9e972dc.png" mode=""></image>
			<view>
				<image style="position: relative;top: 53px;width: 162px;height: 266px;z-index: 1;" src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2bacebc9dee7f962a1ee2ddde78c4c19.png" mode=""></image>
				<view style="display: flex;justify-content: space-between;padding: 80px 17px;position: relative;top: -270px;">
					<view class="card">
						<view class="title1">成熟知性</view>
						<view class="card_content">
							<view class="subheading">
								<image src="../../static/download/subheading.png" mode=""></image>
							</view>
							<image style="width: 100%; height: 147.63px" src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/2ae931dfe464eafc9c7e23e388887f34.png" mode=""></image>
							<view class="similarity">相似度90%</view>
						</view>
						<view class="card_footer">
							<view class="topitem"> 小燕 <image src="../../static/download/vip.png" mode=""></image>
								<view>
									<image src="../../static/download/huo.png" mode=""></image> 好评如潮
								</view>
							</view>
							<view class="bottomitem"> 深圳市 <view>2.5km</view> 18岁 </view>
						</view>
					</view>
					<image style="width: 128px; height: 210px" src="https://sj-sh.oss-cn-shanghai.aliyuncs.com/third/uploads/20250912/7859885417641c66142282b313bb03ab.png" mode=""></image>
				</view>
			</view>
			<view class="logo">
				<image src="../../static/download/logo.png" mode="" style="width: 54px; height: 54px"></image>
				<view class="appName">缘定缘分</view>
				<view class="yaoqingcode" v-if="parent_user_id"> 邀请码：{{ parent_user_id }}
				</view>
			</view>
			<view class="but-box">
				<view class="but" @click="showPopup('az')">
					<image src="/static/common/anzhuo.png" style="width: 28rpx;height: 34rpx;"></image>
					<text>安卓下载</text>
				</view>
				<view class="but" @click="showPopup('ios')">
					<image style="width: 28rpx;height: 34rpx;" src="/static/common/ios.png"></image>
					<text>IOS下载</text>
				</view>
			</view>
		</view>
		<!-- 下载弹框 -->
		<view class="popup-overlay" v-if="showDownloadPopup" @click="closePopup">
			<view class="popup-container" @click.stop>
				<!-- 关闭按钮 -->
				<view class="close-btn" @click="closePopup">
					<text>×</text>
				</view>
				<!-- 弹框内容 -->
				<view class="popup-content">
					<view class="popup-title">填写资料下载APP</view>
					<!-- 
          <view class="invite-code" v-if="parent_user_id">
            <text class="invite-label">邀请码：</text>
            <text class="invite-value">{{ parent_user_id }}</text>
          </view> -->
					<view class="phone-input-container">
						<view class="country-code">+86</view>
						<input class="phone-input" type="number" placeholder="请输入手机号" v-model="phoneNumber" maxlength="11" />
					</view>
					<view class="confirm-btn" @click="confirmDownload">确认</view>
				</view>
			</view>
		</view>
		<view class="downloadshare" v-if="isdownloadShare">
			<view style="display: flex;font-size: 17px;color: #ffffff;align-items: flex-end;">
				<view style="display: flex; align-items: end"> 1、点击右上角 <image src="../../static/downloadshare/slh.png" mode="widthFix" style="width: 25px; margin: 10px 9px"></image>
				</view>
				<image src="../../static/downloadshare/line.png" mode="widthFix" style="width: 151px; margin-left: 20px; margin-bottom: 10px"></image>
			</view>
			<view style="font-size: 17px; color: #ffffff; margin-top: 15px"> 2、选择在默认浏览器中打开 </view>
			<image src="../../static/downloadshare/icongroud.png" mode="widthFix" style="width: 100%; margin-top: 52px"></image>
		</view>
	</view>
</template>
<script>
	import user from "@/api/user.js";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	export default {
		data() {
			return {
				parent_user_id: 0,
				deviceId: "",
				isdownloadShare: false,
				showDownloadPopup: false,
				phoneNumber: "",
				file: '',
				type:''
			};
		},
		onLoad(options) {
			if (options.parent_user_id) {
				this.parent_user_id = Number(options.parent_user_id);
				uni.setStorageSync("parent_user_id", this.parent_user_id);
			}
			let browser = window.navigator.userAgent.toLowerCase();
			if (browser.match(/MicroMessenger/i) == "micromessenger") {
				this.isdownloadShare = true;
			}
			this.getDownLoadUrl()
		},
		methods: {
			getDownLoadUrl() {
				this.$Api['common'].getApplicationVersionLatest().then(res => {
					const data = res.data;
					this.file = data.apppackage
				}).catch(err => {
					console.log(err)
				});
			},
			// 显示下载弹框
			showPopup(type) {
				this.type=type
				let browser = window.navigator.userAgent.toLowerCase();
				// 匹配en中是否含有MicroMessenger字符串
				if (browser.match(/MicroMessenger/i) != "micromessenger") {
					if (uni.getStorageSync("newPhone")) {
						this.phoneNumber = uni.getStorageSync("newPhone");
						this.toApp();
					} else {
						if (this.parent_user_id) {
							this.showDownloadPopup = true;
						} else {
							this.toApp()
						}
					}
				} else {
					this.isdownloadShare = true;
				}
			},
			// 关闭弹框
			closePopup() {
				this.showDownloadPopup = false;
			},
			// 确认下载
			confirmDownload() {
				if (!this.phoneNumber) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
					});
					return;
				}
				this.toApp();
			},
			// 跳转下载页面
			toApp() {
				if (!this.parent_user_id) {
					if(this.type=='az'){
						window.location.href = this.file;
					}else{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
				} else {
					uni.setStorageSync("newPhone", this.phoneNumber);
					this.$Api.common.setPhoneCode({
						mobile: this.phoneNumber,
						parent_user_id: this.parent_user_id,
					}).then((res) => {
						this.showDownloadPopup = false;
						// let browser = window.navigator.userAgent.toLowerCase();
						// 匹配en中是否含有MicroMessenger字符串
						// if (browser.match(/MicroMessenger/i) != "micromessenger") {
						if(this.type=='az'){
							window.location.href = this.file;
						}else{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
						// } else {
						//   this.isdownloadShare = true;
						// uni.navigateTo({
						// 	url: '/pages/downloadshare/downloadshare'
						// })
						// }
					});
				}
				// if (this.parent_user_id != undefined) {
				//   uni.setStorageSync("parent_user_id", this.parent_user_id);
				//   uni.navigateTo({
				//     url: "/pages/login/login",
				//   });
				// } else {
				//   let browser = window.navigator.userAgent.toLowerCase();
				//   // 匹配en中是否含有MicroMessenger字符串
				//   if (browser.match(/MicroMessenger/i) != "micromessenger") {
				//     window.location.href = "https://oss.bigchun.com/apk/ydyf.apk";
				//   } else {
				//     this.isdownloadShare = true;
				//     // uni.navigateTo({
				//     // 	url: '/pages/downloadshare/downloadshare'
				//     // })
				//   }
				// }
			},
		},
	};
</script>
<style lang="less" scoped>
	.download {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			top: 0;
			z-index: 1;
			text-align: center;

			.title {
				margin: 44px auto 0;
				width: 90%;
				height: 70px;
			}

			.card {
				width: 128px;
				height: 210px;
				background: #ffffff;
				border-radius: 8px;
				padding: 6px;
				box-sizing: border-box;

				.title1 {
					font-weight: 500;
					font-size: 9px;
					color: #323334;
					line-height: 13px;
					text-align: center;
					font-style: normal;
				}

				&_content {
					width: 100%;
					height: 100%;

					.subheading {
						background: rgba(241, 105, 246, 1);
						border-radius: 2px;
						padding: 0;
						width: 22px;
						height: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						top: 5px;
						z-index: 1;

						&>image {
							width: 28px;
							height: 10px;
						}
					}

					.similarity {
						background: rgba(241, 105, 246, 0.3);
						border-radius: 0px 0px 6px 6px;
						font-weight: 400;
						font-size: 7px;
						color: #ffffff;
						line-height: 10px;
						text-align: center;
						font-style: normal;
						position: relative;
						top: -16px;
					}
				}

				&_footer {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: flex-start;
					padding: 0 6px;
					position: relative;
					top: -38px;
					box-sizing: border-box;

					.topitem {
						font-weight: 500;
						font-size: 9px;
						color: #323334;
						line-height: 12px;
						text-align: center;
						font-style: normal;
						display: flex;
						align-items: center;

						&>image {
							width: 30px;
							height: 9px;
							margin: 0 4px;
						}

						&>view {
							background: rgba(255, 205, 196, 0.9);
							border-radius: 2px;
							padding: 1px 2px;
							font-weight: 400;
							font-size: 6px;
							color: #fb2525;
							line-height: 10px;
							text-align: center;
							font-style: normal;
							display: flex;
							align-items: center;
							box-sizing: border-box;

							&>image {
								width: 8px;
								height: 8px;
							}
						}
					}

					.bottomitem {
						margin-top: 3px;
						font-weight: 400;
						font-size: 8px;
						color: #606060;
						line-height: 8px;
						text-align: left;
						font-style: normal;
						display: flex;
						width: 100%;
						height: 8px;

						&>view {
							margin: 0 3px;
							padding: 0 3px;
							border-left: 1px solid rgba(96, 96, 96, 1);
							border-right: 1px solid rgba(96, 96, 96, 1);
							box-sizing: border-box;
						}
					}
				}
			}

			.appName {
				font-weight: 500;
				font-size: 14px;
				color: #ffffff;
				line-height: 21px;
				text-align: center;
				font-style: normal;
			}

			.logo {
				position: absolute;
				left: 50%;
				bottom: 170px;
				transform: translate(-50%, 0%);
			}
			.but-box{
				position: absolute;
				left: 0;
				bottom: 90px;
				display: flex;
				width: 100vw;
				justify-content: center;
				grid-gap:20rpx;
				.but {
					width: 310rpx;
					height: 44px;
					background: linear-gradient(135deg, #fe93bf 0%, #a27aff 100%);
					box-shadow: 0px 2px 5px 0px rgba(241, 105, 246, 0.3);
					border-radius: 22px;
					font-weight: 500;
					font-size: 15px;
					color: #ffffff;
					line-height: 44px;
					text-align: center;
					font-style: normal;
					display: flex;
					align-items: center;
					justify-content: center;
					grid-gap: 20rpx;
				}
			}
		}

		.bj {

			.download_bj,
			.download_bj1 {
				display: flex;
			}

			.download_bj1 {
				height: 155px;

				&>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.downloadshare {
			width: 100%;
			height: 100vh;
			overflow: hidden;
			background: rgba(0, 0, 0, 0.8);
			padding: 17px 30px;
			box-sizing: border-box;
			position: fixed;
			z-index: 9999;
			top: 0;
		}
	}

	.yaoqingcode {
		padding: 6px 15px;
		border-radius: 30px;
		background: #ffffff;
		color: #a27aff;
		margin-top: 5px;
	}

	/* 下载弹框样式 */
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10000;
	}

	.popup-container {
		position: relative;
		width: 320px;
		background: linear-gradient(180deg, #f8e6ff 0%, #ffffff 100%);
		border-radius: 20px;
		padding: 40px 30px 30px;
		box-sizing: border-box;
		margin: 0 20px;
	}

	.close-btn {
		position: absolute;
		top: 15px;
		right: 20px;
		width: 30px;
		height: 30px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
	}

	.popup-content {
		text-align: center;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
	}

	.invite-code {
		background: #ffffff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		text-align: left;
	}

	.invite-label {
		font-size: 14px;
		color: #666;
	}

	.invite-value {
		font-size: 16px;
		font-weight: bold;
		color: #e066ea;
		margin-left: 10px;
	}

	.phone-input-container {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 25px;
		padding: 0 20px;
		margin-bottom: 30px;
		height: 50px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.country-code {
		font-size: 16px;
		color: #666;
		margin-right: 15px;
		border-right: 1px solid #e0e0e0;
		padding-right: 15px;
	}

	.phone-input {
		flex: 1;
		font-size: 16px;
		color: #333;
		border: none;
		outline: none;
		background: transparent;
	}

	.phone-input::placeholder {
		color: #ccc;
	}

	.confirm-btn {
		width: 100%;
		height: 50px;
		background: linear-gradient(135deg, #fe93bf 0%, #a27aff 100%);
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		cursor: pointer;
		box-shadow: 0 4px 15px rgba(241, 105, 246, 0.3);
	}
</style>